<template>
  <div class="login-container">
    <div class="top-box">
      <van-nav-bar left-arrow @click-left="$router.push('/find')" />
    </div>
    <div class="main-box">
      <h3>您好，请登录</h3>
      <van-form @submit="onSubmit">
        <div class="mobile">
          <van-icon class="icon" name="orders-o" />
          <van-field
            v-model="user.mobile"
            type="tel"
            placeholder="请输入手机号"
            :rules="rules.mobile"
          />
        </div>
        <div class="mobile">
            <van-icon class="icon" name="completed" />
            <van-field
              :rules="rules.code"
              name="code"
              v-model="user.code"
              placeholder="请输入验证码"
            />
            <van-button v-if="isCode" native-type="button" @click="getCode" class="default" type="default">
              获取验证码
            </van-button>
            <van-button v-else native-type="button" class="default" type="default">
              <van-count-down @finish="finish" style="color: #00c6e5; font-size: 14px;" :time="60 * 1000" format="ss 秒后重试" />
            </van-button>           
        </div>
        <p>
          登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
        </p>
        <div>
          <van-button round block type="danger" native-type="submit"
            >确定</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getCodeAPI } from '@/api/user'
export default {
  name: 'user-login',
  data() {
    return {
      user: {
        mobile: '16688888888',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'onBlur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对', trigger: 'onBlur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onBlur' }]
      },
      isCode: true
    }
  },
  methods: {
    // 获取验证码点击事件
    async getCode() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      const res = await getCodeAPI(this.user)
      // console.log(res)
      this.$toast.success(res.data)
      this.isCode = false
    },
    // 倒计时结束后触发
    finish() {
      this.isCode = true
    },
    // 提交的点击事件
    onSubmit() {
      try {
        this.$store.dispatch('user/login', this.user) 
      } catch (error) {
        console.dir(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  background-color: #f9f9f9;
  height: 100vh;
  .main-box {
    padding: 0 16px;
    h3 {
      margin: 55px 0;
    }
    .mobile {
      width: 100%;
      height: 44px;
      background-color: #fff;
      display: flex;
      margin-bottom: 2px;
      .icon {
        font-size: 16px;
        line-height: 40px;
        margin-left: 10px;
      }
      .default {
        width: 180px;
        font-size: 16px;
        color: #00c6e5;
        background-color: #f9f9f9;
      }
    }
    p {
      font-size: 12px;
      margin: 15px 0 30px;
      span {
        color: #50b8db;
      }
    }
  }
}
</style>
